import React, { useState } from 'react'
import { Table, Button, Tag, message } from 'antd'
import { useNavigate } from 'react-router-dom'
import PopoverColumn from '~/components/popover-column'
import { formatTime, getQueryString } from '~/utils/utils'
import { handleTopPost, deletePost, essentialPost } from '~/api/qa-api'

const userInfo = JSON.parse(localStorage.getItem('u')!)

const colums: any = ({ handleNavToProperty, onClickSetTop, onClickDeletePost, onClickEssentialPost }: any) => [
  {
    title: '序号',
    dataIndex: 'rank',
    align: 'center',
    render: (rank: string, record: any, index: number) => `${rank + 1}`
  },
  {
    title: '帖号',
    dataIndex: 'postId',
    align: 'center',
    render: (postId: string, record: any, index: number) => `${postId}`
  },
  {
    title: '标题',
    dataIndex: 'postTitle',
    align: 'center',
    render: (postTitle: any, record: any) => (
      <div onClick={() => handleNavToProperty(record)} style={{ display: 'flex', alignItems: 'center' }}>
        {record.isTop ? <Tag color="#3370da">置顶</Tag> : ''}
        {record.replyNumber === 0 ? <Tag color="#3370da">新帖子</Tag> : ''}
        <a>{postTitle}</a>
      </div>
    )
  },
  {
    title: '部门',
    align: 'center',
    dataIndex: 'createDepartmentName',
    key: 'age'
  },
  {
    title: '发帖人',
    align: 'center',
    dataIndex: 'createUserName',
    key: 'age',
    render: (createUserName: any, record: any) => (
      <div>
        <div>{createUserName}</div>
        <div>{formatTime(record.createTime)}</div>
      </div>
    )
  },
  {
    title: '角色',
    align: 'center',
    dataIndex: 'createUserRole',
    key: 'age'
  },
  {
    title: '点击数',
    align: 'center',
    dataIndex: 'clickNumber',
    key: 'age'
  },
  {
    title: '跟帖数',
    align: 'center',
    dataIndex: 'replyNumber',
    key: 'age'
  },
  {
    title: '回复人',
    align: 'center',
    dataIndex: 'replyUserName',
    key: 'age',
    render: (replyUserName: any, record: any) => (
      <div>
        <div>{replyUserName}</div>
        <div>{formatTime(record.replyTime)}</div>
      </div>
    )
  },
  {
    title: '操作',
    dataIndex: 'age4',
    align: 'center',
    key: 'age',
    render: (_: any, record: any) => (
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', margin: '5px 0px' }}>
        {(record.createUserNo === userInfo.userNo || userInfo.roles.includes('ADMIN') || userInfo.roles.includes('POST_ADMIN')) && (
          <Button
            style={{ marginTop: 10, width: 100, background: '#3370da' }}
            type="primary"
            size="small"
            onClick={() => onClickDeletePost({ postId: record.postId })}
          >
            删除
          </Button>
        )}
        {(userInfo.roles.includes('POST_ADMIN')) && (
          <Button
            style={{ marginTop: 10, width: 100, background: '#3370da' }}
            type="primary"
            size="small"
            onClick={() => onClickSetTop({ postId: record.postId })}
          >
            置顶
          </Button>
        )}
        {(userInfo.roles.includes('POST_ADMIN')) && (
          <Button
            style={{ marginTop: 10, width: 100, background: '#3370da' }}
            type="primary"
            size="small"
            onClick={() => onClickEssentialPost(record)}
          >
            {record.isEssential ? '取消' : '设置为'}精华贴
          </Button>
        )}
      </div>
    )
  }
]

const WaitingList = ({ waitList, handleGetQueryWaitList }: any) => {
  const navigate = useNavigate()
  const urlPage = getQueryString('page')
  const [current, setCurrent] = useState(urlPage ? Number(urlPage) : 1)

  const handleNavToProperty = (record: any) => {
    navigate('/qa-detail', { state: { ...record, current } })
  }

  const onClickSetTop = async ({ postId }: any) => {
    await handleTopPost({ isTop: 1, postId })
    handleGetQueryWaitList()
  }

  const onClickDeletePost = async ({ postId }: any) => {
    await deletePost({ postId })
    handleGetQueryWaitList()
  }

  const onClickEssentialPost = async (record: any) => {
    await essentialPost({ isEssential: record.isEssential ? 0 : 1, postId: record.postId })
    message.success('设置成功')
  }

  return (
    <div>
      <Table
        pagination={{
          size: 'default',
          total: waitList.length,
          showSizeChanger: true,
          showQuickJumper: true,
          defaultPageSize: 20,
          showTotal: total => `共 ${total} 条`,
          current,
          onChange: page => {
            history.replaceState('', '', `${location.origin}${location.pathname}?page=${page}`)
            setCurrent(page)
          }
        }}
        rowKey="postId"
        bordered
        dataSource={waitList}
        columns={colums({ handleNavToProperty, onClickSetTop, onClickDeletePost, onClickEssentialPost })}
      />
    </div>
  )
}

export default WaitingList
